<template>
  <div class="recordinfo">
    <el-table
      :data="recordInfoData"
      border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="nodeName" label="流程环节"></el-table-column>
      <el-table-column prop="handleUserName" label="处理人"></el-table-column>
      <el-table-column prop="approvePoint" label="验收记录">
        <template #default="{ row }">
          <template v-for="item in formatterStatusLabel(row)" :key="item.id">
            <div v-if="item.type === 'text'">
              {{ item.title }}：{{ item.name }}
            </div>
            <div v-else-if="item.type === 'file'">
              {{ item.title }}：
              <el-button
                type="text"
                v-for="file in item.files"
                :key="file.uuidFile"
                @click="download(file)"
              >
                {{ file.fileName || file.name }}
              </el-button>
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="handleTime"
        label="处理时间"
        width="160"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
import { isArray } from "lodash-es";
import { download } from "/@/utils/download";
import { fieldDecode } from "/@/utils/format/fieldSignFormat";

defineProps({
  recordInfoData: {
    type: Array,
    require: true,
    default: () => []
  }
});

const formatterStatusLabel = row => {
  const arr = [];
  if (row.valueJson) {
    const valueJson = JSON.parse(row.valueJson);
    Object.keys(valueJson).forEach(item => {
      const { key, value } = fieldDecode(valueJson[item]);
      if (key === "验收人") {
        arr.push({
          type: "text",
          title: key,
          name: value.map(i => i.name).join()
        });
      } else if (isArray(value)) {
        arr.push({
          type: "file",
          title: key,
          files: value
        });
      } else {
        arr.push({
          type: "text",
          title: key,
          name: value
        });
      }
    });
    return arr;
  }
  return [];
};
</script>

<style lang="scss" scoped></style>
